<template>
	<div id='_container'>
        <div class='_name middle'><slot></slot></div>
        <div class='_pie-container' ref='container'>
            <v-chart v-if='show' style='height: 100%;width: 100%;' :options='options'></v-chart>
            <span class='absolute xy f-16'>{{rate}}%</span>
        </div>
        <div class='_data middle'>
            <div class='_item'>
                <div>{{value[0].value}}个</div>
                <div>总个数</div>
            </div>
            <div class='_item'>
                <div>{{value[1].value}}个</div>
                <div>未处理</div>
            </div>
            <div class='_item'>
                <div>{{value[2].value}}个</div>
                <div>已处理</div>
            </div>
        </div>
	</div>
</template>

<script>
	export default {
		name : 'device-pie-chart',

		props : {
			rate : {
				type : [Number, String],
				default : 0
			},
			value : {
				type : [Array, Object],
				default : function() {
					return []
				}
			}
		},
		
		data() {
			return {
				show : false
			}
		},
		
		computed : {
			options () {
                var W = this.$refs.container.clientWidth / 2
				var data = JSON.parse(JSON.stringify(this.value))

				var startAngle = 360
				var series = []
				var sum = 0
				data.forEach(v => {
					sum += v.value
				})

				if(sum == 0) {
					data[0].value = 10
					sum = 10
				}

                
				var colorList = ['#5b6eff', '#444fa4', '#5c6383']
				
				
				data.forEach((item, index) => {
                    var radius = 0
                    if(index == 0) { //总数
                        radius = [W - 10, W]
                    }else if(index == 1) { //已处理
                        radius = [W - 8, W - 2]
                    }else {
                        radius = [W - 6, W - 4]
                    }
					var v = item.value
					var serie = {
						type : 'pie',
						startAngle : startAngle,
						silent : true,
						center : ['50%', '50%'],
						radius : radius,
						labelLine: {
                            show : false
						},
						label : {
							show : false
						},
						data   : [
							{name : item.name, value : v, v : v, itemStyle : {color : colorList[index]}},
							{name : item.name, value : sum - v, v : v, itemStyle : {color : 'transparent'}}
						]
					}
					series.push(serie)
					startAngle -= (v / sum * 360)
				})
				
				var options =  {
					grid : {
						top : '10px',
						right : '10px',
						bottom : '10px',
						left : '10px'
					},

					series: series
				}

				return options
			}
		},

		mounted () {
			this.show = true
		}
	}
</script>

<style scoped lang='scss'>
    #_container{
        position: relative;
        padding-left: 80px;

        ._name{
            position: absolute;
            left:0;
            width: 60px;
            text-align: right;
            font-size: 14px;
        }

        ._data{
            position: absolute;
            right: 0;
            overflow: hidden;
            ._item {
                float: left;
                text-align: center;
                margin-left: 40px;
                &:first-child{
                    margin-left: 0;
                }
            }

        }
    }
    ._pie-container{
        height: 90px;
        width: 90px;
        position: relative;
    }
</style>